<template>
  <view class="edit-address">
    <!-- 头部 -->
    <view class="edit-header">
      <view class="title">编辑收货地址</view>
      <view class="save-btn" @click="saveAddress">保存</view>
    </view>

    <!-- 表单内容 -->
    <view class="form-item">
      <text class="label">所在城市:</text>
      <picker mode="selector" :range="cityList" @change="onCityChange" :value="selectedCityIndex">
        <view class="picker-view">
          {{ cityList[selectedCityIndex] || '请选择所在城市' }}
        </view>
      </picker>
    </view>

    <view class="form-item">
      <text class="label">小区/大厦/学校:</text>
      <input class="input" v-model="form.department" placeholder="请输入小区/大厦/学校" />
    </view>

    <view class="form-item">
      <text class="label">楼号-门牌号:</text>
      <input class="input" v-model="form.houseNumber" placeholder="请输入楼号-门牌号" />
    </view>

    <view class="form-item">
      <text class="label">收货人:</text>
      <input class="input" v-model="form.name" placeholder="请输入收货人姓名" />
    </view>

    <view class="form-item">
      <text class="label">联系电话:</text>
      <input class="input" v-model="form.phone" placeholder="请输入联系电话" />
    </view>
  </view>
</template>

<script>
	import Config from '@/Config.js'
export default {
  data() {
    return {
      form: {
        id: '',
        city: '',
        department: '',
        houseNumber: '',
        name: '',
        phone: ''
      },
      cityList: ['北京', '上海', '广州', '深圳', '成都', '杭州'], // 示例城市列表
      selectedCityIndex: -1
    }
  },
  onLoad(options) {
    // 获取传递过来的地址ID
    if (options.id) {
      this.form.id = options.id
      this.getAddressDetail()
    }
  },
  methods: {
    // 获取地址详情
    getAddressDetail() {
      uni.request({
        url: Config.api_host+`/address/${this.form.id}`,
        success: (res) => {
          if (res.data) {
            this.form = res.data
            // 找到当前城市在城市列表中的索引
            this.selectedCityIndex = this.cityList.indexOf(this.form.city)
          }
        },
        fail: () => {
          uni.showToast({
            title: '获取地址失败',
            icon: 'none'
          })
        }
      })
    },

    // 保存地址
    saveAddress() {
      // 简单验证
      if (!this.form.department || !this.form.houseNumber || !this.form.name || !this.form.phone || this.selectedCityIndex === -1) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      // 手机号验证
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }

      this.form.city = this.cityList[this.selectedCityIndex]

      uni.showLoading({
        title: '保存中...'
      })

      uni.request({
        url: Config.api_host+`/address/${this.form.id}`,
        method: 'PUT',
        data: this.form,
        success: (res) => {
          uni.hideLoading()
          if (res.statusCode === 200) {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            })

            // 返回上一页并刷新
            setTimeout(() => {
              uni.navigateBack({
                success: () => {
                  const pages = getCurrentPages()
                  const prevPage = pages[pages.length - 1]
                  if (prevPage && prevPage.$vm.fetch) {
                    prevPage.$vm.fetch()
                  }
                }
              })
            }, 1500)
          } else {
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    },
    onCityChange(e) {
      this.selectedCityIndex = e.detail.value
    }
  }
}
</script>

<style>
.edit-address {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 20px;
}

.edit-header .title {
  font-size: 18px;
  font-weight: bold;
}

.edit-header .save-btn {
  color: #007aff;
  font-size: 16px;
}

.form-item {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
}

.form-item .label {
  display: block;
  color: #666;
  font-size: 16px;
}

.form-item .input {
  width: 80%;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.picker-view {
  width: 100%;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}
</style>